<template>
	<div class="adress">
		<div v-for="o in options" :key="o.id">		
			<label><input @change="tog(o.id,o)" type="checkbox" :value="o.id" v-model="areaIds" >{{o.name}} </label>
			<div>
				<label v-for="c in o.child" :key="c.id" ><input @change="togc(c.id,o)" type="checkbox" :value="c.id" v-model="areaIds">{{c.name}}</label>
			</div>
		</div>
		<p>{{areaIds}}</p>
	</div>
</template>
<script>
	export default{
		name:'test',
		data(){
			return {
				options:[{"name":"北京","id":10001,"child":[{"name":"东城区","id":1},{"name":"西城区","id":2},{"name":"崇文区","id":3},{"name":"宣武区","id":4},{"name":"朝阳区","id":5},{"name":"丰台区","id":6},{"name":"石景山区","id":7},{"name":"海淀区","id":8},{"name":"门头沟区","id":9},{"name":"房山区","id":10},{"name":"通州区","id":11},{"name":"顺义区","id":12},{"name":"昌平区","id":13},{"name":"大兴区","id":14},{"name":"平谷区","id":15},{"name":"怀柔区","id":16},{"name":"密云县","id":17},{"name":"延庆县","id":18}]},{"name":"天津","id":10002,"child":[{"name":"和平区","id":19},{"name":"河东区","id":20},{"name":"河西区","id":21},{"name":"南开区","id":22},{"name":"河北区","id":23},{"name":"红桥区","id":24},{"name":"塘沽区","id":25},{"name":"汉沽区","id":26},{"name":"大港区","id":27},{"name":"东丽区","id":28},{"name":"西青区","id":29},{"name":"津南区","id":30},{"name":"北辰区","id":31},{"name":"武清区","id":32},{"name":"宝坻区","id":33},{"name":"宁河县","id":34},{"name":"静海县","id":35},{"name":"蓟 县","id":36}]},{"name":"河北","id":10003,"child":[{"name":"石家庄","id":37},{"name":"唐山","id":38},{"name":"秦皇岛","id":39},{"name":"邯郸","id":40},{"name":"邢台","id":41},{"name":"保定","id":42},{"name":"张家口","id":43},{"name":"承德","id":44},{"name":"沧州","id":45},{"name":"廊坊","id":46},{"name":"衡水","id":47}]},{"name":"山西","id":10004,"child":[{"name":"太原","id":48},{"name":"大同","id":49},{"name":"阳泉","id":50},{"name":"长治","id":51},{"name":"晋城","id":52},{"name":"朔州","id":53},{"name":"忻州","id":54},{"name":"吕梁","id":55},{"name":"晋中","id":56},{"name":"临汾","id":57},{"name":"运城","id":58}]},{"name":"内蒙古","id":10005,"child":[{"name":"呼和浩特","id":59},{"name":"包头","id":60},{"name":"乌海","id":61},{"name":"赤峰","id":62},{"name":"呼伦贝尔","id":63},{"name":"兴安盟","id":64},{"name":"通辽","id":65},{"name":"锡林郭勒盟","id":66},{"name":"乌兰察布盟","id":67},{"name":"伊克昭盟","id":68},{"name":"巴彦淖尔盟","id":69},{"name":"阿拉善盟","id":70}]},{"name":"辽宁","id":10006,"child":[{"name":"沈阳","id":71},{"name":"大连","id":72},{"name":"鞍山","id":73},{"name":"抚顺","id":74},{"name":"本溪","id":75},{"name":"丹东","id":76},{"name":"锦州","id":77},{"name":"营口","id":78},{"name":"阜新","id":79},{"name":"辽阳","id":80},{"name":"盘锦","id":81},{"name":"铁岭","id":82},{"name":"朝阳","id":83},{"name":"葫芦岛","id":84},{"name":"其他","id":85}]},{"name":"吉林","id":10007,"child":[{"name":"长春","id":86},{"name":"吉林","id":87},{"name":"四平","id":88},{"name":"辽源","id":89},{"name":"通化","id":90},{"name":"白山","id":91},{"name":"松原","id":92},{"name":"白城","id":93},{"name":"延边朝鲜族自治州","id":94},{"name":"其他","id":95}]},{"name":"黑龙江","id":10008,"child":[{"name":"哈尔滨","id":96},{"name":"齐齐哈尔","id":97},{"name":"鹤岗","id":98},{"name":"双鸭山","id":99},{"name":"鸡西","id":100},{"name":"大庆","id":101},{"name":"伊春","id":102},{"name":"牡丹江","id":103},{"name":"佳木斯","id":104},{"name":"七台河","id":105},{"name":"黑河","id":106},{"name":"绥化","id":107},{"name":"大兴安岭地区","id":108},{"name":"其他","id":109}]},{"name":"上海","id":10009,"child":[{"name":"黄浦区","id":110},{"name":"卢湾区","id":111},{"name":"徐汇区","id":112},{"name":"长宁区","id":113},{"name":"静安区","id":114},{"name":"普陀区","id":115},{"name":"闸北区","id":116},{"name":"虹口区","id":117},{"name":"杨浦区","id":118},{"name":"宝山区","id":119},{"name":"闵行区","id":120},{"name":"嘉定区","id":121},{"name":"松江区","id":122},{"name":"金山区","id":123},{"name":"青浦区","id":124},{"name":"南汇区","id":125},{"name":"奉贤区","id":126},{"name":"浦东新区","id":127},{"name":"崇明县","id":128},{"name":"其他","id":129}]},{"name":"江苏","id":10010,"child":[{"name":"南京","id":130},{"name":"苏州","id":131},{"name":"无锡","id":132},{"name":"常州","id":133},{"name":"镇江","id":134},{"name":"南通","id":135},{"name":"泰州","id":136},{"name":"扬州","id":137},{"name":"盐城","id":138},{"name":"连云港","id":139},{"name":"徐州","id":140},{"name":"淮安","id":141},{"name":"宿迁","id":142},{"name":"其他","id":143}]},{"name":"浙江","id":10011,"child":[{"name":"杭州","id":144},{"name":"宁波","id":145},{"name":"温州","id":146},{"name":"嘉兴","id":147},{"name":"湖州","id":148},{"name":"绍兴","id":149},{"name":"金华","id":150},{"name":"衢州","id":151},{"name":"舟山","id":152},{"name":"台州","id":153},{"name":"丽水","id":154},{"name":"其他","id":155}]},{"name":"安徽","id":10012,"child":[{"name":"合肥","id":156},{"name":"芜湖","id":157},{"name":"蚌埠","id":158},{"name":"淮南","id":159},{"name":"马鞍山","id":160},{"name":"淮北","id":161},{"name":"铜陵","id":162},{"name":"安庆","id":163},{"name":"黄山","id":164},{"name":"滁州","id":165},{"name":"阜阳","id":166},{"name":"宿州","id":167},{"name":"巢湖","id":168},{"name":"六安","id":169},{"name":"亳州","id":170},{"name":"池州","id":171},{"name":"宣城","id":172},{"name":"其他","id":173}]},{"name":"福建","id":10013,"child":[{"name":"福州","id":174},{"name":"厦门","id":175},{"name":"莆田","id":176},{"name":"三明","id":177},{"name":"泉州","id":178},{"name":"漳州","id":179},{"name":"南平","id":180},{"name":"龙岩","id":181},{"name":"宁德","id":182},{"name":"其他","id":183}]}],
					areaIds:[10001,10002]
				}
		},
		methods:{
			 in_array(e, arr) {
			      for (let i = 0; i < arr.length; i++) {
			        if (arr[i] == e) return true;
			      }
			      return false;
    		},
    		
    		tog(id,o){
    			
    			if(this.areaIds.indexOf(id)<0){
    				for (let i=0;i<o.child.length;i++){
    					this.areaIds.push(o.child[i].id)
    				}
    			}else{
					let newArray=[]
					let newAreaIds=[]
    				for (let i=0;i<o.child.length;i++){
    					newArray.push(o.child[i].id)
    				}

    				this.areaIds.forEach(v=>{
    					if(newArray.indexOf(v)===-1)
    						newAreaIds.push(v)
    				})
    				this.areaIds=newAreaIds
    			}
    		},
    		
    		togc(id,o){
    			let newArray=[]
				let newAreaIds=[]
    				for (let i=0;i<o.child.length;i++){
    					newArray.push(o.child[i].id)
    				}
    				newArray.forEach(v=>{
    					if(this.areaIds.indexOf(v)>=0){
    						newAreaIds.push(v)
    					}
    				})
	    			if(newAreaIds.length<=1){
	    				this.areaIds.splice(this.areaIds.indexOf(o.id),1)	
	    			}else{
	    				
	    			}		    				
	    		}
		
		}

			
		
	}
</script>
<style scoped>
	.adress{
		padding: 0 200px;
		text-align: left;
	}
</style>